<template>
	<view>
		<!-- 选择员工职位 -->
		<!-- 需改************ -->
		<u-popup :show="message.ygZhiWeiShow" @close="close" round="10">
			<view class="mainpadding flexcenter titletext">选择职位</view>
			<view class="mainpadding">
				<scroll-view scroll-y="true" style="max-height: 200rpx;">
					<u-checkbox-group v-model="checked" iconPlacement="right" placement="column">
						<u-checkbox activeColor="#0BBDCB"  :customStyle="{marginTop: '30rpx'}" v-for="item in columns" :label="item.name"
							:name="item.id"></u-checkbox>
					</u-checkbox-group>
				</scroll-view>
				<view class="flexbetween">
					<view class="surebtn reset flexcenter" style="margin-top: 60rpx;" @click="reset">重置</view>
					<view class="surebtn flexcenter" style="margin-top: 60rpx;" @click="confirm">确认</view>
				</view>
			</view>
			
		</u-popup>

		<!-- <u-picker :show="message.ygZhiWeiShow" :columns="columns" title="选择职位" @cancel="confirm" @confirm="confirm"
			keyName="name"></u-picker> -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		name: "selectYGZhiWei", //需改************
		props: {
			message: {}
		},
		data() {
			return {
				columns: [{
					id: 1,
					name: "销售员"
				}, {
					id: 2,
					name: "送货员"
				}, {
					id: 3,
					name: "仓库管理员"
				}, {
					id: 4,
					name: "老板"
				}, {
					id: 5,
					name: "其他"
				}, {
					id: 6,
					name: "财务"
				}, {
					id: 7,
					name: "经理"
				}],
				checked: "",
			};
		},
		methods: {
			confirm() {
				let text = []
				this.columns.forEach((current,cindex)=>{
					this.checked.forEach((item)=>{
						if(item==cindex+1){
							text.push(current.name)
						}
					})
				})
				let e = {
					id:this.checked.join(),
					name:text.join(),
				}
				this.$emit("ygZhiWeiSure", e); //需改************
			},
			reset(){
				this.checked=''
				let e = {
					id:"",
					name:"",
				}
				this.$emit("ygZhiWeiSure", e); //需改************
			},
			close(){
				this.$parent.ygZhiWeiShow = false
			}
		}

	}
</script>

<style lang="scss" scoped>
	/deep/.u-popup__content {
		width: 100% !important;
	}
	.surebtn {
		width: 45%;
	}
	
	.reset {
		background: #ebb563;
	}
</style>